<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- <link rel="stylesheet" type="text/css" href="../css/register.css" /> -->
		<link rel="stylesheet" type="text/css" href="../css/shop.css"/>
		<link rel="stylesheet" type="text/css" href="../font_2191682_778z6zvvyi8/iconfont.css" />
		<link rel="stylesheet" type="text/css" href="../font_2191682_m6maym37tjk/iconfont.css"/>
		<!-- <link rel="stylesheet" type="text/css" href="../css/slide.css"/> -->
	</head>
	<body>
		<div id="header">
		    <div id="header-icon">
		        <ul>
		            <li>
		                <span class="iconfont icon-home_n"></span>
		            </li>
		            <li>
		                / 账户创建
		            </li>
		        </ul>
		    </div>
		    <div id="header-icon2">
		        <ul class="header-right">
		            <li class="nav">
		                <button class="nav-btn">
		                    <span>中国</span>
		                    <span class="iconfont icon-dim-xiajiantou-small" style="color: gray;"></span>
		
		
		                </button>
		            </li>
		
		            <li class="nav">
		                <button class="nav-btn">
		                    <span>中文</span>
		                    <span class="iconfont icon-dim-xiajiantou-small" style="color: gray;"></span>
		
		                </button>
		
		            </li>
		            <li class="nav"> <button class="nav-btn"><img src="../img/banner-login.webp" alt="" style="widows: 36px;" height="12px"></button></li>
		
		            <li class="nav">
		                <button class="nav-btn">
		                    <span>搜索</span>
		                    <span class="iconfont icon-sousuo" style="color: gray;"></span>
		                </button>
		
		            </li>
		            <li class="nav">
		                <button class="nav-btn">在线购买</button>
		            </li>
		            <li class="nav">
		                <button class="nav-btn">
		
		                    <span class="iconfont icon-gouwudai" style="color: gray;"></span>
		                    <span>(0)</span>
		                </button>
		
		            </li>
		        </ul>
		    </div>
		</div>
		<section>
			<div id="neirong">
				<div id="h">
					<h1>在线购买</h1>
				</div>
				<div id="list-top">
					<div id="btn">
						<button type="button">筛选<br>器</button>
					</div>
					<div id="ul">
						<ul>
						<li><a href="">快速筛选器</a></li>
						<li><a href="">材质</a></li>
						<li><a href="">机芯</a></li>
						<li><a href="">功能</a></li>
						<li><a href="">形状</a></li>
						<li><a href="">价格区间</a></li>	
						</ul>
						
					</div>
					<div id="inpt">
						<input type="" name="" id="input1" value="" placeholder="搜索腕表"/>
						<span class="iconfont icon-sousuo"></span>
					</div>
				</div>
				<div id="list-middle">
					<div id="left">
						<input type="checkbox" name="" id="" value="" />
						<span>AVAILABLE TO BUY</span>
					</div>
					<div id="right">
						<select name="">
							<option value="">排序</option>
							<option>上次选购的表款</option>
							<option>低高</option>
							<option>高低</option>
						</select>
					</div>
				</div>
			</div>
			<div id="neirong2">
				<div class="shanp">
					<dl>
					<dt><img></dt>
					<dd></dd>
					<dd></dd>
					<dd></dd>
					<dd style="color: rgba(0,0,0,0.3)">含值增税</dd>
					</dl>
					<div class="mask-btn">
					    <a href="" >了解详情</a>
					</div>
				</div>
				
				<div class="shanp">
					<dl>
					<dt><img></dt>
					<dd></dd>
					<dd></dd>
					<dd></dd>
					<dd style="color: rgba(0,0,0,0.3)">含值增税</dd>
					</dl>
					<div class="mask-btn">
					    <a href="" >了解详情</a>
					</div>
				</div>
				<div class="shanp">
					<dl>
					<dt><img></dt>
					<dd></dd>
					<dd></dd>
					<dd></dd>
					<dd style="color: rgba(0,0,0,0.3)">含值增税</dd>
					</dl>
					<div class="mask-btn">
					    <a href="" >了解详情</a>
					</div>
				</div>
				<div class="shanp">
					<dl>
					<dt><img></dt>
					<dd></dd>
					<dd></dd>
					<dd></dd>
					<dd style="color: rgba(0,0,0,0.3)">含值增税</dd>
					</dl>
					<div class="mask-btn">
					    <a href="" >了解详情</a>
					</div>
				</div>
			</div>
			
		</section>
		<footer></footer>
		
	</body>
</html>
<script src="../js/jQuery.js"></script>
<script>
	$("footer").load("footer.html")
	$("header").load("header.html")
	
	$.getJSON("../json/shop.json",function(json){
		let i=0;
		for(let index1 in json){
			for(let index2 in json[index1]){
				if(index2=="id"){
					$(".shanp:eq("+i+") .mask-btn a" ).attr("href","../html/detail.html?id="+json[index1][index2])
					console.log(json[index1][index2])
				}
				if(index2=="img"){
					$(".shanp:eq("+i+") dl dt img").attr("src",json[index1][index2])
					console.log(json[index1][index2])
				}
				if(index2=="type"){
					$(".shanp:eq("+i+") dl dd").eq(1).html(json[index1][index2])
					console.log(json[index1][index2])
				}
				if(index2=="info"){
					$(".shanp:eq("+i+") dl dd").eq(0).html(json[index1][index2])
					console.log(json[index1][index2])
				}
				if(index2=="price"){
					$(".shanp:eq("+i+") dl dd").eq(2).html("￥"+json[index1][index2])
					console.log(json[index1][index2])
				}
			}
			i++;
		}
	});
	
</script>
